<template>
	<view>
		<view style="background: url(https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/e63bcf73858e37c567847ca55821ddfa.png) no-repeat;background-size: 100%;width: 100%;height: 414rpx;">

		</view>
		<view style="width: 92%;position: absolute;top:10rpx;left: 4%;padding-bottom: 30rpx;">
			<view class="" style="width: 100%;margin: 0 auto 20rpx;display: flex;text-align: center;line-height: 100rpx;">
				<view @click="dibu(1)" style="flex: 1;position: relative;" :class="tabIndex==1?'activea':'aa'">
					企业
					<image v-if="tabIndex==1" :src="tabLineImg" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
				</view>
				<view @click="dibu(2)" style="flex: 1;position: relative;" :class="tabIndex==2?'activea':'aa'">
					用户
					<image v-if="tabIndex==2" :src="tabLineImg" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
				</view>
				<view @click="dibu(3)" style="flex: 1;position: relative;" :class="tabIndex==3?'activea':'aa'">
					市场门店
					<image v-if="tabIndex==3" :src="tabLineImg" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
				</view>
			</view>
			<view v-if="tabIndex==1">
				<view v-for="(item,index) in list" :key='index' style="overflow: hidden;background-color: #FFFFFF;box-sizing: border-box;padding: 40rpx 30rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
					<view @click="qiye(item.firm.id,item.firm.special_type,item.firm.name)" style="width: 80%;float: left;overflow: hidden;">
						<view style="width: 22%;float: left;">
							<image :src="item.firm.logo_image" style="width: 88rpx;height: 88rpx;border-radius: 50%;display: block;left: 0;" mode="aspectFill"></image>
						</view>
						<view style="width: 77%;float: left;padding: 4rpx 0;">
							<view style="line-height: 40rpx;font-size: 24rpx;color: #999999;height: 80rpx;" class="erhang">
								{{item.firm.name || ''}}
							</view>
						</view>
					</view>
					<view @click="gz_cj(item.firm_id,index)" style="width: 20%;float: left;">
						<view style="width:120rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #999999;color: #999999;font-size: 22rpx;border-radius: 25rpx;float: right;margin-top: 15rpx;">
							取消关注
						</view>
					</view>
				</view>
				<view style="text-align: center;margin-top: 50rpx;">
					<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
					<view style="width: 80%;margin: 0 auto;">
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
					</view>
				</view>
			</view>
			<view v-if="tabIndex==2">
				<view v-for="(item,index) in list" :key='index' style="overflow: hidden;background-color: #FFFFFF;box-sizing: border-box;padding: 40rpx 30rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
					<view @click="yongxx(item.client.id)" style="width: 80%;float: left;overflow: hidden;">
						<view style="width: 22%;float: left;"><!-- @click="qihuo_changjia(item.brand_id)" -->
							<image :src="item.client.avatar" style="width: 88rpx;height: 88rpx;border-radius: 50%;display: block;" mode=""></image>
						</view>
						<view style="width: 77%;float: left;padding: 4rpx 0;">
							<view style="line-height: 40rpx;font-size: 30rpx;color: #000000;">
								{{item.client.nickname}}
							</view>
							<view style="line-height: 40rpx;font-size: 24rpx;color: #999999;" class="yihang">
								{{item.client.company}}
							</view>
						</view>
					</view>
					<view style="width: 20%;float: left;"> <!-- @click="gz_qihuo(item.brand_id,index)" -->
						<view @click="gz_yh(item.client.id,index)" style="width:120rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #999999;color: #999999;font-size: 22rpx;border-radius: 25rpx;float: right;margin-top: 15rpx;">
							取消关注
						</view>
					</view>
				</view>
				<view style="text-align: center;margin-top: 50rpx;">
					<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
					<view style="width: 80%;margin: 0 auto;">
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
					</view>
				</view>
			</view>

			<view v-if="tabIndex==3">
				<view v-for="(item,index) in list" :key='index' style="overflow: hidden;background-color: #FFFFFF;box-sizing: border-box;padding: 40rpx 30rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
					<view @click="sc_md(item.firm.id)" style="width: 80%;float: left;overflow: hidden;">
						<view style="width: 22%;float: left;">
							<image :src="item.firm.main_logo" style="width: 88rpx;height: 88rpx;border-radius: 50%;display: block;" mode=""></image>
						</view>
						<view style="width: 77%;float: left;padding: 4rpx 0;">
							<view style="line-height: 40rpx;font-size: 24rpx;color: #999999;height: 80rpx;" class="erhang">
								{{item.firm.name || ''}}
							</view>
						</view>
					</view>
					<view @click="gz_scmd(item.firm.id,index)" style="width: 20%;float: left;">
						<view style="width:120rpx;height: 50rpx;line-height: 50rpx;text-align: center;border: 1px solid #999999;color: #999999;font-size: 22rpx;border-radius: 25rpx;float: right;margin-top: 15rpx;">
							取消关注
						</view>
					</view>
				</view>
				<view style="text-align: center;margin-top: 50rpx;">
					<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
					<view style="width: 80%;margin: 0 auto;">
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据" v-if="list.length==0"></u-divider>
						<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="没有更多了" v-if="list.length>0 && enmpy"></u-divider>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page:1,
				list:[],
				enmpy:false,
				kk:false,
				tabIndex:1,
    		tabLineImg: require('@/static/my/tab-line.png')
			}
		},

		onLoad() {
			this.wdgz()
		},

		onReachBottom: function() {
			console.log(222222222)
			if (this.enmpy) {
				return
			} else {
				this.wdgz()
			}
		},
		methods:{
			yongxx:function(id){
				uni.navigateTo({
					url:'/fenbao/pages/wenzhang/yhxx?id='+id
				})
			},
			// 关注用户
			gz_yh:function(id,index){
				this.post('api/client/attention_client',{client_id:id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			qiye:function(id,type,name){
				if(type==1){
					uni.navigateTo({
						url:'../../../fenbao/pages/wenzhang/qyxq?id='+id+'&name='+name
					})
				}else{
					uni.navigateTo({
						url:'/subpages/pages/wuliuqiye/wl_qyxq?id='+id+'&name='+name
					})
				}
			},
			sc_md:function(id){
				uni.navigateTo({
					url:'/subpages/pages/scqy_xq?id='+id
				})
			},
			qihuo_changjia:function(id){
				uni.navigateTo({
					url:'/fenbao/pages/wenzhang/cjxq?id='+id
				})
			},
			dibu:function(index){
				this.tabIndex=index
				this.page=1
				this.list=[]
				this.kk=false
				this.enmpy=false
				this.wdgz()
			},
			// 我的关注
			wdgz:function(){
				let data={
					type:this.tabIndex,
					page:this.page,
					limit:10
				}
				this.post('api/client/attention',data,true).then(res=>{
					console.log(res)
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			// 取消关注企业
			gz_cj:function(id,index){
				this.post('api/firm_data/attention',{firm_id:id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			// 取消关注期货厂家
			gz_qihuo:function(id,index){
				this.post('api/futures/attention',{id:id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			// 取消关注市场门店
			gz_scmd:function(id,index){
				this.post('api/bazaar/attention',{id:id},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.list.splice(index,1)
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F8F8F8!important;
		font-family: Demibold;
	}
	.activea{
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.aa{
		color: #f7f7f7;
		font-size: 26rpx;
	}
</style>
